<script setup lang="ts">
import { NTabs, NTabPane, NCard, NAvatar, NTag, NFlex } from "naive-ui";

import Reward from "../components/Reward.vue";
import Task from "../components/Task.vue";
import { useUserStore } from "../stores/userStore";
import { taskType, rewardType } from "../mod/madle";
import { onMounted, ref, provide } from "vue";
import { getTaskList } from "../apis/task";
import { getRewardList } from "../apis/reward";
const userStore = useUserStore();

const taskList = ref<taskType[]>([]);
const rewardList = ref<rewardType[]>([]);
const updateTaskList = async () => {
  const res = await getTaskList(userStore.getUserId);
  taskList.value = res.data;
};
const updateRewardList = async () => {
  const resR = await getRewardList(userStore.getUserId);
  rewardList.value = resR.data;
};
onMounted(async () => {
  await updateTaskList();
  await updateRewardList();
});
/**依赖注入 */
provide("updateTask", updateTaskList);
provide("updateReward", updateRewardList);
</script>

<template>
  <NCard
    style="
      width: 80%;
      max-width: 600px;
      min-width: 400px;
      max-height: 1000px;
      min-height: 600px;
      height: 80%;
      margin: 0 auto;
    "
  >
    <NFlex>
      <n-avatar round size="small" src="avater.png" />
      <NTag round type="info">
        {{ userStore.getName }}
      </NTag>
      <NTag :bordered="false" type="success">
        {{ userStore.getPoints }}
      </NTag>
    </NFlex>
    <NTabs type="segment" animated>
      <NTabPane name="task" tab="任务">
        <Task :taskList="taskList" :userid="userStore.getUserId"
      /></NTabPane>
      <NTabPane name="Reward" tab="奖励">
        <Reward :rewardList="rewardList" :userid="userStore.getUserId"
      /></NTabPane>
    </NTabs>
  </NCard>
  <!-- <NButton @click="toLogin">去登陆</NButton> -->
</template>

<style scoped></style>
